/*

物体材质 属性 envMap 

场景背景，贴图
scene.background 
scene.environment

*/
import *  as THREE from 'three'
import { AxesHelper } from 'three';
import gsap from 'gsap'
import * as dat from 'dat.gui'

//导入轨道控制器
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls'

//1.创建场景
const scene = new THREE.Scene()

//2.创建相机 (透视相机)
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

//设置相机位置
camera.position.set(0, 0, 5);
scene.add(camera);

//设置cube纹理加载器
const cubeTextureLoader = new THREE.CubeTextureLoader()
const envMapTexture = cubeTextureLoader.load([
  "textures/env/pos-x.jpg",
  "textures/env/neg-x.jpg",
  "textures/env/pos-y.jpg",
  "textures/env/neg-y.jpg",
  "textures/env/pos-z.jpg",
  "textures/env/neg-z.jpg",
])

const sphereGeometry = new THREE.SphereGeometry(1, 20, 20)
const material = new THREE.MeshStandardMaterial({
  metalness: 0.7,
  roughness: 0.1,
  // envMap: envMapTexture
})
const sphere = new THREE.Mesh(sphereGeometry, material)
scene.add(sphere)

//给场景添加背景
scene.background = envMapTexture
//给场景所以的物体添加默认的环境贴图，有独立的用自己的
scene.environment = envMapTexture

// import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader'
// //加载hdr环境图
// const rgbeLoader = new RGBELoader('textures/hdr/002.hdr').then((texture) => {
//   texture.mapping = THREE.EquirectangularReflectionMapping
//   scene.background = texture
//   scene.environment = texture
// })

//灯光
//环境光
const light = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(light)

//直线光源
const directionLight = new THREE.DirectionalLight(0xffffff, 0.5);
directionLight.position.set(10, 10, 10)
scene.add(directionLight);

//初始化渲染器
const renderer = new THREE.WebGLRenderer();
//设置渲染器大小
renderer.setSize(window.innerWidth, window.innerHeight);

//将webgl渲染的canvas内容添加到body
document.body.appendChild(renderer.domElement)

//使用渲染器，通过相机将场景渲染进来
renderer.render(scene, camera);

//添加坐标辅助器
const axesHelper = new AxesHelper(5)
scene.add(axesHelper)
//创建轨道控制器
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;

const clock=new THREE.Clock()

function render(){
  controls.update()
  //获取时钟运行的总时长
  let time = clock.getElapsedTime();
  renderer.render(scene,camera)
  //调用下一帧的时候就会调用render渲染
  requestAnimationFrame(render)
}

render();